<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    let state = {
        type: 'ul',// 标签名称
        props: { // 标签的属性对象
            className: 'ul'
        },
        children: [ // 标签的内容【内容只能是标签对象】
            {
                type: 'li',
                name: '一级_1', // 标签的文本内容
                props: {
                    className: 'li'
                },
                children: [
                    {
                        type: 'div',
                        name: '二级_1',
                        children: [
                            {
                                type: 'div',
                                name: '三级_1'
                            }
                        ]
                    }
                ]
            },
            {
                type: 'li',
                name: '一级_2',
                props: {
                    className: 'li'
                },
                children: [
                    {
                        type: 'div',
                        name: '二级_2'
                    }
                ]
            }
        ]
    }
    function render(obj,root){
        //1、创建标签
        let dom = document.createElement(obj.type);
        //2、添加属性
        if(obj.props){
            for (let key in obj.props) {
                dom.setAttribute(key,obj.props[key])
            }
        }
        if(obj.name){
            dom.innerHTML+=obj.name
        }
        if(obj.children){
            obj.children.forEach((item) => {
                render(item,dom)
            })
        }
        //3、把标签追加到父元素
        root.appendChild(dom)
    }
    render(state,root);
</script>
</html>